<template>
  <div class="main">
    <div class="float-right w-[100%]">
      <el-form
        ref="formRef"
        :inline="true"
        :model="formData"
        class="bg-bg_color w-[99/100] pl-8 pt-4"
      >
        <el-form-item label="公司：" prop="username">
          <el-select
            v-model="formData.companyName"
            placeholder="请选择"
            clearable
            class="!w-[160px]"
          >
            <el-option label="中储南京智慧物流有限公司" value="1" />
            <el-option label="金湖分公司" value="0" />
            <el-option label="淮安分公司" value="2" />
            <el-option label="徐州分公司" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="角色名称：" prop="postname">
          <el-input
            v-model="formData.postname"
            placeholder="请输入角色名称"
            clearable
            class="!w-[160px]"
          />
        </el-form-item>
        <el-form-item label="角色编码：" prop="postCode">
          <el-input
            v-model="formData.postCode"
            placeholder="请输入角色编码"
            clearable
            class="!w-[160px]"
          />
        </el-form-item>
        <el-form-item label="人员状态：" prop="username">
          <el-select
            v-model="formData.status"
            placeholder="请选择"
            clearable
            class="!w-[160px]"
          >
            <el-option label="在职" value="1" />
            <el-option label="离职" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="账户状态：" prop="username">
          <el-select
            v-model="formData.status"
            placeholder="请选择"
            clearable
            class="!w-[160px]"
          >
            <el-option label="已开启" value="1" />
            <el-option label="已关闭" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch"
            ><el-icon class="el-icon--left"><Search /></el-icon>搜索</el-button
          >
          <el-button @click="resetForm(formRef)"
            ><el-icon class="el-icon--left"><Refresh /></el-icon>重置</el-button
          >
        </el-form-item>
      </el-form>

      <PureTableBar title="" @refresh="onSearch" :needtool="false">
        <template v-slot="{ size, checkList }">
          <div class="table-header-btns">
            <el-button type="primary" plain @click="openDialog('add')">
              <el-icon class="el-icon--left"><CirclePlus /></el-icon>
              新增
            </el-button>
            <el-button type="success" plain @click="openDialog('modify')">
              <el-icon class="el-icon--left"><EditPen /></el-icon>
              修改
            </el-button>
            <el-button type="danger" plain @click="deleteRole">
              <el-icon class="el-icon--left"><Delete /></el-icon>
              删除
            </el-button>
          </div>
          <pure-table
            border
            align-whole="center"
            table-layout="auto"
            :loading="loading"
            :data="tableData"
            :columns="columns"
            :checkList="checkList"
            :pagination="pagination"
            :paginationSmall="size === 'small' ? true : false"
            :header-cell-style="{
              background: 'var(--el-table-row-hover-bg-color)',
              color: 'var(--el-text-color-primary)'
            }"
            @selection-change="handleSelectionChange"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
            <template #operation="{ row }">
              <el-button
                class="reset-margin"
                link
                type="primary"
                :size="size"
                @click="viewDetail(row)"
                >菜单权限</el-button
              >
              <el-button
                class="reset-margin"
                link
                type="primary"
                :size="size"
                @click="assignUser(row)"
                >分配用户</el-button
              >
            </template>
          </pure-table>
        </template>
      </PureTableBar>
    </div>

    <!--分配用户抽屉-->
    <transition name="fade">
      <div id="drawer" class="drawer_dialog" v-if="showDrawer">
        <div class="title">
          <div>分配用户</div>
          <el-button circle @click="showDrawer = false">
            <el-icon><CloseBold /></el-icon>
          </el-button>
        </div>
        <div class="button_list">
          <el-input
            style="flex: 2; margin-right: 30%"
            v-model="jobNumber"
            placeholder="请输入工号"
            clearable
          />
          <el-button type="primary" @click="onSearch"
            ><el-icon><Search /></el-icon>搜索</el-button
          >
        </div>
        <PureTableBar title="" @refresh="onSearch" :needtool="false">
          <template v-slot="{ size, checkList }">
            <div style="margin-bottom: 8px">
              <el-button type="primary" @click="openJobsTree"> 新增 </el-button>
              <el-button type="danger" @click="deleteUser"> 删除 </el-button>
            </div>
            <pure-table
              ref="tableRef"
              border
              align-whole="center"
              row-key="id"
              showOverflowTooltip
              table-layout="auto"
              default-expand-all
              :loading="loading"
              :size="size"
              :data="jobsList"
              :columns="jobsColumns"
              :checkList="checkList"
              :header-cell-style="{
                background: 'var(--el-table-row-hover-bg-color)',
                color: 'var(--el-text-color-primary)'
              }"
              @selection-change="jobSelectionChange"
              @size-change="jobSizeChange"
              @current-change="jobCurrentChange"
            >
              <template #operation="{ row }">
                <el-button
                  class="reset-margin"
                  link
                  type="primary"
                  :size="size"
                  @click="openDrawer(row)"
                >
                  人员
                </el-button>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </div>
    </transition>

    <roleDialog
      ref="roleDetail"
      :isEdit="roleDialogIsEdit"
      :row="selectedRows[0]"
    />
    <jobsTreeTransfer
      ref="jobsTreeCom"
      :isMulti="true"
      :isEmployee="true"
      :isMix="false"
    />
    <conditionSettingDialog ref="conditionSetting" />
  </div>
</template>

<script>
import dayjs from "dayjs";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import roleDialog from "./roleDialog";
import jobsTreeTransfer from "@/components/jobsTreeTransfer/index.vue";
import conditionSettingDialog from "@/components/conditionSettingDialog/index.vue";
export default {
  name: "userManager",

  components: {
    PureTableBar,
    roleDialog,
    jobsTreeTransfer,
    conditionSettingDialog
  },

  data() {
    return {
      formData: {},
      columns: [
        {
          type: "selection",
          align: "left"
        },
        {
          label: "公司",
          prop: "postname"
        },
        {
          label: "姓名",
          prop: "username"
        },
        {
          label: "账号",
          prop: "nickname"
        },
        {
          label: "工号",
          prop: "nickname"
        },
        {
          label: "账户状态",
          prop: "status",
          width: 130
        },
        {
          label: "入职时间",
          prop: "createTime",
          width: 160,
          formatter: ({ createTime }) =>
            dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
        },
        {
          label: "人员类型",
          width: 130,
          slot: "userType"
        },
        {
          label: "人员状态",
          width: 130,
          slot: "userType"
        },
        {
          label: "操作",
          fixed: "right",
          width: 230,
          slot: "operation"
        }
      ],
      loading: false,
      tableData: [
        {
          postname: "中储南京智慧物流有限公司",
          username: "张三"
        }
      ],
      pagination: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
        background: true
      },
      size: "small",
      roleDialogIsEdit: false,
      selectedRows: [],
      showDrawer: false,
      jobNumber: "",
      loading: false,
      jobsList: [
        {
          userName: "张三",
          id: "202205012",
          jobNumber: "202205012"
        },
        {
          userName: "李四",
          id: "202206001",
          jobNumber: "202206001"
        }
      ],
      jobsColumns: [
        {
          type: "selection",
          align: "left"
        },
        {
          label: "人员姓名",
          prop: "userName"
        },
        {
          label: "工号",
          prop: "jobNumber"
        }
      ],
      jobSelections: []
    };
  },

  methods: {
    useRenderIcon,
    modify() {},
    openDialog(type) {
      if (type === "modify") {
        if (this.selectedRows.length > 1) {
          this.$message.warning("仅支持同时操作一条数据！");
          return;
        }
      }
      this.roleDialogIsEdit = true;
      this.$refs.roleDetail.onChangeVisible();
    },
    handleSelectionChange(selected) {
      this.selectedRows = selected;
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    deleteRole() {
      this.$refs.conditionSetting.onChangeVisible();
    },
    openDrawer(row) {
      this.showDrawer = true;
      this.$nextTick(() => {
        this.handleDrawerHeight();
      });
    },
    handleDrawerHeight() {
      // 获取窗口高度
      let winHeight = null;
      if (window.innerHeight) {
        winHeight = window.innerHeight;
      } else if (document.body && document.body.clientHeight) {
        winHeight = document.body.clientHeight;
      }
      // 通过深入 Document 内部对 body 进行检测，获取窗口大小
      if (document.documentElement && document.documentElement.clientHeight) {
        winHeight = document.documentElement.clientHeight;
      }
      //DIV高度为浏览器窗口高度 的60%
      document.getElementById("drawer").style.height =
        winHeight * 1 - 96 + "px";
    },
    assignUser() {
      this.openDrawer();
    },
    openJobsTree() {
      this.$refs.jobsTreeCom.onChangeVisible();
    },
    onSearch() {},
    jobSelectionChange(selections) {
      this.jobSelections = selections;
    },
    jobSizeChange() {},
    jobCurrentChange() {},
    deleteUser() {
      if (this.jobSelections.length == 0 || !this.jobSelections) {
        this.$messageBox
          .confirm("请选择需要删除的用户", "系统提示", {
            type: "warning",
            confirmButtonText: "确认"
          })
          .then()
          .catch();
      }
    }
  },

  mounted() {}
};
</script>

<style lang="scss" scoped>
.table-header-btns {
  margin-bottom: 8px;
}
.fade-enter-active,
.fade-leave-active {
  animation: move 0.3s;
}
.fade-enter,
.fade-leave-active {
  animation: move 0.3s reverse;
}
@keyframes move {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translate(0);
  }
}
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

.drawer_dialog {
  width: 400px;
  background-color: #fff;
  position: fixed;
  right: 0px;
  z-index: 9;
  padding: 16px;
  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
    0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);

  .title {
    display: flex;
    justify-content: space-between;
  }

  .button_list {
    display: flex;
    margin-top: 18px;
  }
}
</style>
